<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_事件监听</title>
</head>
<body>
<button onclick="alert('点击了按钮1！')">按钮1</button>
<button id="b2">按钮2</button>
<hr>
<h4>今天星期一</h4>
<span>震惊！XX居然GAN了！</span>
<h4>后天星期三</h4>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur debitis dicta doloremque ea expedita
        facere fugiat ipsam, libero maiores quam quos reiciendis rem repudiandae similique tempore, ullam unde velit
        voluptatem.
    </div>
    <div>Ab, adipisci aperiam architecto beatae consectetur debitis deleniti dolore eos, id incidunt inventore ipsam
        ipsum neque nobis nostrum numquam perspiciatis quam quod saepe similique temporibus ullam ut vero? Impedit,
        mollitia.
    </div>
    <div>Beatae blanditiis commodi delectus hic iusto non omnis possimus quaerat quod voluptate? Animi consectetur cum
        incidunt, iusto neque porro quas qui recusandae repellat temporibus. Assumenda dolorem exercitationem fugiat
        reiciendis temporibus?
    </div>
    <div>Eveniet expedita harum quisquam rerum. Aliquam est laboriosam nam nisi obcaecati quisquam suscipit voluptates
        voluptatum? A dolor, dolores eveniet fuga maxime nam nihil quae quod saepe veritatis. Explicabo, rem, sit.
    </div>
    <div>Ducimus ea excepturi necessitatibus nihil odit porro reprehenderit similique! Aliquid at, consequuntur,
        deleniti doloribus earum enim eum incidunt itaque minima nesciunt non officiis pariatur quisquam repudiandae
        tempora temporibus ullam veniam?
    </div>
    <div>Ab animi aut corporis dicta dolor dolorum eveniet ex facere facilis, id in labore laborum maxime modi nisi
        obcaecati odit officia officiis optio placeat porro quas quos reiciendis tempora voluptas?
    </div>
    <div>Amet consequuntur cum est exercitationem explicabo facilis fugiat fugit harum illo incidunt ipsam iure laborum
        maxime molestias nam nesciunt officiis provident, quo quod, recusandae, sed soluta ullam ut vitae voluptates?
    </div>
    <div>Accusantium alias aspernatur assumenda corporis distinctio doloremque dolorum illo inventore ipsum iste,
        laboriosam nemo nulla numquam odit porro soluta unde. Aut culpa dolorum ipsa molestias optio quis, quod.
        Dignissimos, neque.
    </div>
    <div>Eum, placeat quos. Architecto asperiores beatae blanditiis dolor dolorum eum exercitationem fuga ipsa nostrum,
        nulla odio omnis praesentium quisquam, reprehenderit sed tenetur voluptatem! Accusantium alias assumenda
        corporis eum nobis obcaecati?
    </div>
    <div>Ad architecto delectus, deserunt earum est eveniet illum impedit labore, laboriosam minus nemo, omnis
        repellendus ut! Accusantium ad adipisci aperiam assumenda eveniet magnam neque quae saepe veniam! Quis, rem,
        sequi.
    </div>
    <div>Ea illo nobis odit, optio pariatur sequi. Alias aliquid aspernatur atque deserunt doloribus esse et facilis
        iure nam nobis, nulla odit possimus quasi quia quibusdam quo quod veniam? Cupiditate, veritatis?
    </div>
    <div>Ab corporis culpa deserunt eveniet, minima suscipit! Alias autem commodi corporis culpa dolore eligendi
        explicabo, hic libero necessitatibus nisi nobis non perspiciatis, quia quis rem rerum sapiente similique tempore
        voluptatibus.
    </div>
    <div>Asperiores, beatae dignissimos dolores facere, fugit harum ipsum iusto minima, mollitia necessitatibus neque
        pariatur quis repudiandae. A accusantium, architecto commodi, dignissimos doloremque, eaque iusto nisi
        perspiciatis placeat ullam veritatis voluptate?
    </div>
    <div>Accusantium ad aliquid amet aspernatur ducimus error explicabo harum hic illum inventore ipsum iste laudantium
        libero magni minima nulla placeat, quam quibusdam quod rem rerum sint ullam! Aperiam obcaecati, voluptas?
    </div>
    <div>A autem consequuntur doloremque eaque in, minus nostrum numquam repellat rerum veniam? Aut commodi deserunt
        explicabo laudantium, natus odio ratione rem reprehenderit rerum sequi tempore unde velit veniam. Cupiditate,
        iste.
    </div>
    <div>Amet assumenda blanditiis cupiditate maxime sit velit voluptatibus. Commodi cupiditate error ipsam iusto odit
        quam, reprehenderit sit! Ab alias assumenda culpa doloribus ea iusto natus, optio possimus provident repellendus
        tempora.
    </div>
    <div>Beatae facere hic numquam. Alias dolorum eos eum excepturi, iste maiores maxime minima minus, molestiae odit
        quaerat quod quos repudiandae saepe temporibus unde, ut velit voluptatem. Aut consequuntur maiores totam?
    </div>
    <div>A assumenda cum debitis doloribus esse facilis fugiat id impedit ipsa ipsam libero maiores, modi mollitia,
        nesciunt perspiciatis porro provident quam quas quidem quis reiciendis rerum, sapiente ullam velit voluptas.
    </div>
    <div>A, iure, quos. Autem beatae debitis doloremque dolores eligendi excepturi facere maxime, molestiae nihil nulla
        odio odit officia, pariatur qui quis rerum vitae. Cumque et excepturi incidunt quod, repellat voluptatem!
    </div>
    <div>Aperiam debitis doloremque eos esse ex ipsam itaque iure nobis omnis optio pariatur placeat quam quas quidem,
        quis quisquam reiciendis repellendus reprehenderit, rerum similique sint unde velit veritatis. Nulla, quisquam.
    </div>
    <div>Asperiores at aut, deleniti deserunt distinctio harum labore laborum magnam placeat quisquam reprehenderit
        ullam, voluptate? Animi, atque distinctio dolor dolores laboriosam nisi odit, optio quas quasi, recusandae
        soluta ullam velit!
    </div>
    <div>Aut eligendi fugiat obcaecati voluptate. Adipisci aperiam at consequatur enim minus nam, obcaecati quas,
        quibusdam, reiciendis repellendus reprehenderit soluta unde voluptatum. Alias aspernatur dignissimos modi quam
        qui quis repellat saepe.
    </div>
    <div>Aliquid cupiditate eum fugiat labore necessitatibus neque ullam voluptate voluptatibus? Ad aliquid aut
        cupiditate dignissimos error expedita fugiat illo illum impedit obcaecati optio, pariatur qui ratione
        reprehenderit sapiente, ut voluptatum.
    </div>
    <div>Ad animi culpa cumque deleniti dolores dolorum enim eos error eum facere, fugiat hic illum, iure iusto magnam
        magni minus officiis pariatur perspiciatis quidem rem repellat tempora vitae voluptas voluptatem!
    </div>
    <div>A aspernatur assumenda blanditiis est eveniet itaque maiores molestiae nobis nulla omnis optio quae, quos
        reiciendis sed sit soluta unde veniam. Accusamus cumque in ipsam laborum nesciunt nostrum, obcaecati sint.
    </div>
    <div>Aperiam, aspernatur consequatur deserunt doloribus hic maxime nemo non porro praesentium quos, saepe temporibus
        vitae! Cupiditate numquam repellendus ut. Ab aspernatur blanditiis omnis perspiciatis quibusdam quis reiciendis
        rem vitae! Cumque!
    </div>
    <div>Accusantium aliquam blanditiis consequuntur dignissimos dolorum eligendi est eum eveniet facilis fuga inventore
        ipsa minus molestiae non odit omnis, possimus quae saepe sit tempora tenetur, totam vel vero, vitae voluptate.
    </div>
    <div>Amet aspernatur at cumque dicta dolorum eveniet ex, nesciunt numquam officiis omnis possimus, qui, reiciendis
        rem. Dolores esse id labore nisi obcaecati odit, quam quo similique! In libero pariatur reprehenderit.
    </div>
    <div>Amet architecto assumenda eaque, eligendi enim, est et, ipsam necessitatibus nobis numquam odio officiis porro
        quaerat quidem quos recusandae rem repellat soluta tempore temporibus totam ut veniam voluptas voluptate
        voluptatum?
    </div>
    <div>Aliquam amet dolore ea, nam obcaecati odit vero? Earum esse et quia rem! Aliquam earum enim ex fuga fugit
        laboriosam modi nam nesciunt recusandae, rem rerum sequi veniam voluptas. Sed!
    </div>
    <div>Asperiores at consectetur culpa debitis deleniti dicta et excepturi exercitationem itaque maxime minima minus
        odio porro quasi quisquam recusandae, soluta tempore unde velit vitae. Accusantium debitis nulla sequi ut
        veniam!
    </div>
    <div>Aperiam blanditiis eos est, et expedita nemo, nostrum omnis, possimus quasi repellendus sapiente tempore unde
        ut veniam voluptatem? Atque doloremque dolorum eos et fugiat ipsam modi nihil quam sit! Incidunt.
    </div>
    <div>Autem distinctio eligendi et hic ipsa maiores nihil numquam quaerat quo vel veritatis, vitae. Accusantium ad
        alias at doloribus, ea error hic molestiae nulla possimus quaerat qui quo ut voluptates?
    </div>
    <div>Accusamus aperiam consequuntur culpa cupiditate deleniti dignissimos, dolores doloribus eaque eius est fugit,
        in incidunt ipsam minima necessitatibus neque nihil nulla numquam obcaecati reiciendis repellat similique soluta
        totam velit voluptatum!
    </div>
    <div>Aut, doloremque earum est maiores nisi officiis pariatur possimus quam, quisquam rerum, sequi sunt ut
        voluptatum? Alias cum cumque nemo quaerat? Dolorum eaque ex harum quas rerum tempore, vel velit.
    </div>
    <div>Beatae commodi debitis dolorem dolorum eligendi id labore maiores, maxime molestiae, non nulla optio,
        perferendis praesentium quae quaerat quas repellendus repudiandae sed suscipit tempora temporibus ullam unde
        velit voluptate voluptatem.
    </div>
    <div>Aspernatur dolores, earum eius enim, error ex harum laboriosam, libero perspiciatis quasi quisquam quo
        reprehenderit vero! Delectus dignissimos dolore dolores laboriosam mollitia omnis sed tempora voluptatem
        voluptatibus. Ipsam, rerum veritatis!
    </div>
    <div>A adipisci, aperiam aspernatur atque blanditiis deserunt dignissimos dolor doloremque ea facere fuga harum
        impedit inventore laudantium magni omnis perspiciatis porro, quas quisquam, rem saepe sunt suscipit temporibus
        veniam vero?
    </div>
    <div>Accusantium assumenda at atque, blanditiis culpa dignissimos dolor eos et, exercitationem itaque labore libero
        nisi placeat praesentium quibusdam quisquam reprehenderit rerum sed sint sit sunt tenetur vitae voluptatum?
        Commodi, repudiandae?
    </div>
    <div>Cum, fugit iste minima quae quos rem temporibus vero voluptatem. Amet cumque delectus deleniti deserunt enim
        ipsa ipsam laborum minima, nihil nostrum obcaecati odio omnis perferendis, quasi reprehenderit sint sit!
    </div>
    <div>Adipisci animi architecto assumenda blanditiis corporis, distinctio doloremque enim id illum ipsam labore
        laborum minima molestias necessitatibus nemo nostrum nulla, officiis porro possimus quaerat reiciendis
        repellendus sint ullam veniam vitae.
    </div>
    <div>Animi possimus quod recusandae repellendus rerum similique temporibus voluptate! A asperiores culpa deleniti
        dolorum eos fuga iste itaque iusto magnam omnis quos sit, tempore vel! Deleniti eligendi error explicabo nam.
    </div>
    <div>Ad, amet animi asperiores beatae distinctio dolore doloremque enim esse expedita facilis in ipsa maiores
        molestiae natus necessitatibus nobis nostrum, odit officiis omnis perferendis, quasi reprehenderit rerum sequi
        voluptatem voluptatum.
    </div>
    <div>Adipisci, eveniet hic nemo nobis obcaecati provident rerum tempora! Architecto dignissimos eius nulla tempore?
        Consequatur doloremque, dolorum explicabo fugit sint sit veniam. Aut molestiae officiis quaerat tenetur. Quis,
        quos, reprehenderit.
    </div>
    <div>Consectetur deserunt ex fugiat hic incidunt neque nihil sapiente, velit. Delectus modi quaerat quod rerum
        similique. Beatae corporis dolore doloribus error facilis fugit mollitia, officia quae reiciendis repellat sit
        unde.
    </div>
    <div>Harum, impedit, sequi! Ab at commodi culpa cumque dolore earum et expedita fugit illo magnam maiores nam natus
        necessitatibus neque nobis odio perspiciatis rerum sint tempora tempore temporibus veritatis, vitae?
    </div>
    <div>Commodi delectus dolorum et explicabo, fuga hic inventore ipsum, laboriosam maiores neque nihil odio omnis
        perferendis quae repellat rerum sed suscipit ullam ut vero! Adipisci consequatur delectus deleniti quaerat
        velit.
    </div>
    <div>Aspernatur deserunt dolorem doloremque eaque esse illum magni temporibus totam voluptate. Accusantium dolorum
        eos non! Corporis dolorem, dolores doloribus ipsa ipsam, iste odio, praesentium quaerat quidem ratione unde
        vitae voluptates.
    </div>
    <div>Aspernatur cum, dolor eligendi excepturi facere fugit harum molestiae odio odit perferendis quae quas,
        quibusdam recusandae repellendus totam velit voluptatibus. Adipisci aliquid assumenda deleniti dicta facilis
        ipsum optio similique sit.
    </div>
    <div>Aliquid, amet cupiditate deleniti error et ex inventore ipsum, iure laborum minus molestias natus neque nihil
        obcaecati porro qui, quia quidem reprehenderit repudiandae saepe sequi totam ullam vel voluptate voluptatem?
    </div>
    <div>Adipisci cum dolore earum exercitationem maiores minima minus quam sapiente tempore veritatis. Ad culpa cum
        distinctio eveniet, facere incidunt ipsa iusto magni necessitatibus nesciunt perspiciatis possimus qui quidem
        unde voluptatem.
    </div>
    <div>Eligendi, incidunt, voluptatibus! Animi beatae consequuntur dignissimos dolore esse et, eveniet, fugit incidunt
        iste maiores minima numquam porro quisquam saepe, sint temporibus ut. At autem cum iste quasi reprehenderit vel.
    </div>
    <div>Aut cum expedita quas sed? Assumenda blanditiis distinctio enim hic iure mollitia, nihil pariatur quaerat qui
        repudiandae ut, voluptatem. Architecto dignissimos dolores ex harum nesciunt officia rem sapiente sint
        veritatis?
    </div>
    <div>A aperiam atque aut eaque, earum explicabo hic maiores molestiae odit officia possimus, rem similique vero.
        Animi at consectetur consequuntur corporis nesciunt sequi! Aspernatur cumque maxime officiis perferendis
        suscipit voluptatum.
    </div>
    <div>Doloremque facilis illum laudantium minima modi repellat repellendus voluptatibus! Aliquam aut deleniti
        dignissimos eius expedita fugiat inventore ipsa, ipsum maiores modi, mollitia odio, officiis quas quibusdam sint
        temporibus vel voluptatem.
    </div>
    <div>Accusamus aliquam commodi, ex ipsum non repellat ut. Aut consequuntur distinctio doloremque eum nam
        necessitatibus porro quasi repellat tempora totam! Aperiam cum deleniti earum impedit itaque minus, quidem sequi
        vel.
    </div>
    <div>Aspernatur autem eligendi enim fuga illo ipsam maiores, nostrum perspiciatis quae quasi repudiandae totam
        voluptatibus! A amet animi cum eaque eligendi illo iste nulla perferendis quam, suscipit vel voluptate
        voluptatibus.
    </div>
    <div>Accusamus delectus distinctio enim libero obcaecati optio praesentium quia. Aperiam deserunt dicta expedita
        mollitia nam odit porro quod. Asperiores corporis cum esse nulla, praesentium tempore vero. Commodi nihil unde
        vero?
    </div>
    <div>Culpa ducimus odit quisquam rem sapiente. Deleniti dolor dolore doloribus eveniet iure magni modi molestias
        natus necessitatibus neque officia perferendis porro provident quaerat repellat sequi, sit voluptatibus.
        Mollitia perferendis, voluptates.
    </div>
    <div>Aut autem dolor eos eveniet, labore modi necessitatibus praesentium quam vero voluptas. Ab aliquam autem beatae
        corporis culpa eos laboriosam laudantium neque nihil perferendis quasi, quibusdam, tenetur ullam ut
        voluptatibus.
    </div>
</div>

<script>
    let b2 = document.querySelector('#b2');
    b2.addEventListener('click',function(){
        alert('点击了按钮2！');
    })

    let span = document.querySelector('span');
    span.addEventListener('click',function(){
        console.log('该娱乐标题被Xxx用户查看1次');
    })

    window.addEventListener('scroll',function(){
        console.log('页面被滚动了！');
    })
    window.addEventListener('resize',function(){
        console.log('页面被调整了！');
    })

    document.addEventListener('visibilitychange',function (){
        if(document.visibilityState === 'hidden'){
            console.log('用户离开了页面！');
        }else{
            console.log('用户返回了页面！');
        }
    })
</script>
</body>
</html>